<script setup>
import { ref } from 'vue'
import HotMovie from '../components/HomeTab/HotMovie.vue';
import Cinema from '../components/HomeTab/Cinema.vue';
import WaitMovie from '../components/HomeTab/WaitMovie.vue';
import ClassicsMovie from '../components/HomeTab/ClassicsMovie.vue';
const selectedCity = ref('贵港');
const active = ref(0);
const changeTab = (e) => {
    active.value = e

    console.log(active.value);
}
</script>
<template>
    <div class="movie">

        <div class="tab">
            <div class="citylist">
                <router-link to="/city-list" class="location">{{ $route.query.city || selectedCity }}</router-link>
                <span class="drop"></span>
            </div>
            <div class="tab-box">
                <van-tabs v-model:active="active" @change="changeTab" :ellipsis="false" line-width="30" color="#f03d37">
                    <van-tab title="热映"></van-tab>
                    <van-tab title="影院"></van-tab>
                    <van-tab title="待映"></van-tab>
                    <van-tab title="经典电影"></van-tab>
                </van-tabs>
            </div>
            <router-link class="search" to="/search">
                <img
                    src="https://obj.pipi.cn/festatic/touchnode/resources/images/dpmmweb/component/index/img/base64/search-red.png">
            </router-link>
        </div>
        <HotMovie v-show="active == 0"></HotMovie>
        <Cinema v-show="active == 1"></Cinema>
        <WaitMovie v-show="active == 2"></WaitMovie>
        <ClassicsMovie v-show="active == 3"></ClassicsMovie>
    </div>
</template>
<style scoped lang="scss">
.movie {
    .tab {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 3px;
        position: relative;
        z-index: 10;

        .tab-box {
            width: 64%;
        }

        .search {
            width: 20px;
            height: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .citylist {
            .location {
                width: 25px;
                height: 13px;
                top: 20px;
                font-size: 15px;
                color: #666;
            }

            .drop {
                float: right;
                display: inline-block;
                position: absolute;
                top: 20px;
                width: 0;
                height: 0;
                margin-left: 4px;
                border: 4px solid transparent;
                border-top-color: #b0b0b0;
            }
        }
    }
}
</style>